'use strict';

/* android 左侧抽屉 */

var React = require('react-native');

var {
	StyleSheet,
	Text,
	View,
	Image
} = React;

var Ionicons = require('react-native-vector-icons/Ionicons');

module.exports = React.createClass({

	render: function() {
		return (
			<View style={styles.container}>
				<View style={styles.photoContainer}>
					<Image
			        style={styles.photo}
			        source={{uri:'http://tp3.sinaimg.cn/1642351362/180/5728706692/0'}}/>
				</View>
		      	<View style={styles.item}>
				    <Ionicons name="android-home" size={28} color="#999"  style={styles.icon}/>
				    <Text style={styles.title}>主    页</Text>
				</View>
				<View style={styles.item}>
				    <Ionicons name="android-cart" size={28} color="#999"  style={styles.icon}/>
				    <Text style={styles.title}>购物车</Text>
				</View>
				<View style={styles.item}>
				    <Ionicons name="android-settings" size={28} color="#999"  style={styles.icon}/>
				    <Text style={styles.title}>设    置</Text>
				</View>
		    </View>
		)
	},

	renderItem: function(title) {
		return (
			<View style={styles.item}>
			     <Ionicons name="android-settings" size={28} color="#999"  style={styles.icon}/>
			     <Text style={styles.title}>{title}</Text>
			</View>
		);
	}
});

var styles = StyleSheet.create({

	container: {
		flex: 1,
		backgroundColor: '#EEE'
	},

	photoContainer: {
		paddingVertical: 15,
		backgroundColor: '#FFF',
		alignItems: 'center',
	},

	photo: {
		width: 90,
		height: 90,
		borderRadius: 45,
	},

	item: {
		backgroundColor: '#FFF',
		padding: 15,
		borderColor: '#CCC',
		borderBottomWidth: 1,
		flexDirection: 'row',
	},
	title: {
		color: '#000',
		fontSize: 20,
	},
	icon: {
		width: 35,
	}
});